<template>
	<div>
		<div class="send-message-box">
			<a-modal title="发送信息" :visible="visible" @cancel="handleCancel" :destroyOnClose="true" :maskClosable="false" :keyboard="false" width="730px" :footer="null" class='send-new-model'>
				<a-form  :form="form"  @submit="handleSubmit">
					<a-form-item label="发件人" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<span>系统消息</span>
					</a-form-item>
					<a-form-item label="标题" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-input maxlength="50" v-decorator="['messageTitle',{rules: [{ required: true, message: '消息标题不能为空' }]}]" placeholder='请填写留言的标题' />
					</a-form-item>
					<a-form-item label="内容" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-textarea maxlength="200"  v-decorator="['messageContent',{rules: [{ required: true, message: '消息内容不能为空' }]}]" placeholder='请填写您想说的话......' style="height: 100px;" />
					</a-form-item>
					<!--<a-form-item label="对外接收人" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-select placeholder="请选择对外接收人" v-decorator="['referId',{rules: [{ required: true, message: '对外接收人不能为空' }]}]"   class='choose-city'>
							<a-select-option :value="item.linkId" v-for="(item,index) in referList" :key="index">{{item.realName}}</a-select-option>
						</a-select>
					</a-form-item>-->
					<!--<a-form-item label="发送方式" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-checkbox-group v-decorator="['messageType']">
							<a-checkbox value="1">
								站内信
							</a-checkbox>
							<a-checkbox value="2">
								短信
							</a-checkbox>
							<a-checkbox value="3">
								邮箱
							</a-checkbox>
						</a-checkbox-group>
					</a-form-item>-->
					<a-form-item label="发送时间" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-date-picker :disabledDate="disabledDate" show-time  format="YYYY-MM-DD HH:mm:ss"  v-decorator="[ 'sendTime', {rules: [{ required: true, message: '发送时间不能为空!' }]}]" placeholder='请选择' />
					</a-form-item>
					<a-form-item label="消息接受人" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
						<a-checkbox-group style="margin-top: 8px;" v-decorator="[ 'receiveRoles', {rules: [{ required: true, message: '请选择消息接受人!' }]}]">
							<a-checkbox :value="item.id" v-for="(item,index) in referList" :key="index">
								{{item.name}}
							</a-checkbox>
							<!--<a-checkbox value="1">
								企业已认证用户
							</a-checkbox>
							<a-checkbox value="2">
								企业未认证用户
							</a-checkbox>
							<a-checkbox value="3">
								个人已认证用户
							</a-checkbox>
							<a-checkbox value="4" style="margin: 0;">
								个人未认证用户
							</a-checkbox>-->
						</a-checkbox-group>
					</a-form-item>
					
					<a-row class='ant-lable-button' style="margin-left: 113px;">
						<a-button class='ant-btn-green' html-type="submit">立即发送</a-button>
						<a-button class='ant-btn-grey' @click="handleCancel">取消</a-button>
					</a-row>
				</a-form>
			</a-modal>
		</div>
	</div>
</template>
<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				referList:[],
				visible: false,
				form: this.$form.createForm(this),
				// confirmLoading: false
			}
		},
		created () {
//			this.getRessBook();
		},
		methods: {
			// 展示模态框
			showModal() {
				this.visible = true;
				this.getRessBook();
			},
			// 取消按钮
			handleCancel(e) {
				this.$emit('close');
				this.visible = false
			},
			// 获取消息人列表
			getRessBook() {
				this.$get('/role/open/getRole/system',{
					pageSize : 99,
					pageNum : 1
				},true).then((r) => {
					console.log(r,'12')
					this.referList = r.data.data;
	            }).catch((e) => {})
			},
			 disabledDate(current) {
		      // Can not select days before today and today
		      return current && current < moment().endOf('day');
		    },
			// 发送信息
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.loading = true;
						values.receiveRoles = values.receiveRoles.join(',')
						values.sendTime = values.sendTime.format('YYYY-MM-DD HH:mm:ss')
						if (values.messageType) values.messageType = values.messageType.join()
						this.$post('/message/internalMessage/send/system', values, true).then((r) => {
							if(r.data.code == '0000') {
								this.$message.success('添加成功！');
								this.handleCancel();
							} else {
								this.$message.error(r.data.message);
							}
							this.loading = false;
						}).catch((e) => {
							this.loading = false;
						})
					}
				});
			},
		}
	}
</script>
<style lang="less">
	.ant-modal-close {
		right: 32px !important;
		top: -5px !important;
		span {
			width: 11px;
			height: 11px;
			color: #15837A;
			font-size: 16px;
		}
	}
	
	.send-new-model {
		.ant-modal-content {
			.ant-modal-header {
				padding: 12px 0 12px 30px;
				background: #E9F4F3;
				.ant-modal-title {
					font-weight: 500;
					color: #15837A;
				}
			}
			.ant-form {
				label {
					font-size: 14px;
					color: #333333;
				}
			}
			.ant-form-item-control {
				input {
					font-size: 14px;
					color: #999999;
				}
			}
			.send-w565 {
				.ant-form-item-control,
				input {
					width: 565px;
					height: 40px;
				}
			}
			a {
				color: #15837A;
				font-size: 14px;
				margin-left: 10px;
			}
			.ant-modal-body {
				padding-bottom: 0 !important;
			}
			.btn-button {
				margin-left: 86px;
				.ant-btn-green {
					margin-right: 24px;
				}
			}
		}
		//下拉小图标
		.ant-select-arrow-icon {
			color: #15837A;
			font-size: 8px;
		}
		.ant-col-2 {
			margin-left: 22px;
		}
		.send-choseway {
			.ant-form-item-label {
				margin-left: 12px;
			}
		}
	}
</style>